<template>
    <el-form label-width="96px" label-position="right" class="zw-form-layout">
        <el-form-item label="分销员">
            <el-input
                v-model.trim="ruleForm.distributor"
                placeholder="请输入昵称、手机号、ID查询"
                style="width: 300px" />
        </el-form-item>
        <el-form-item label="订单来源店铺" label-width="120px">
            <el-select v-model="ruleForm.shopId" filterable @click="onSelectShop" style="width: 300px">
                <el-option label="全部" :value="0" />
                <el-option v-for="item in shopList" :key="item.shopId" :label="item.shopName" :value="item.shopId" />
            </el-select>
        </el-form-item>
        <template v-if="defaultExpand">
            <el-form-item label="订单编号">
                <el-input v-model.trim="ruleForm.orderSn" placeholder="请输入订单编号" style="width: 300px" />
            </el-form-item>
            <el-form-item label="佣金类型">
                <el-select v-model="ruleForm.type" placeholder="全部" style="width: 100px">
                    <el-option
                        v-for="item in commissionTypeOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="结算状态">
                <el-select v-model="ruleForm.status" placeholder="全部" style="width: 100px">
                    <el-option
                        v-for="item in computedStatusOptions"
                        :key="item.value"
                        :label="item.label"
                        :value="item.value" />
                </el-select>
            </el-form-item>
            <el-form-item label="创建时间">
                <el-date-picker
                    style="width: 300px"
                    v-model="ruleForm.date"
                    @change="onDateChange"
                    type="daterange"
                    format="YYYY-MM-DD"
                    value-format="YYYY-MM-DD HH:mm:ss"
                    :default-time="defaultDateRange"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期" />
            </el-form-item>
        </template>
        <div class="btn-space">
            <el-button type="primary" @click="onSearch(ruleFormRef)">查询</el-button>
            <el-button plain @click="onReset(ruleFormRef)">清空</el-button>
            <el-button
                v-if="defaultExpand"
                class="icon_btn"
                :text="true"
                type="primary"
                @click="defaultExpand = !defaultExpand">
                收起<el-icon><ArrowUp /></el-icon>
            </el-button>
            <el-button v-else class="icon_btn" :text="true" type="primary" @click="defaultExpand = !defaultExpand">
                展开<el-icon><ArrowDown /></el-icon>
            </el-button>
        </div>
    </el-form>
</template>

<script setup>
import { packSelectObjUtil } from '@/commons/utils.js';
import constants from '@/commons/constants';
import { getShopListHook } from '@/hooks';
import { reactive, ref } from 'vue';

const emit = defineEmits(['search', 'reset']);
const commissionTypeOptions = packSelectObjUtil(constants.COMMISSION_TYPE);
const computedStatusOptions = packSelectObjUtil(constants.COMPUTED_STATUS);
const defaultDateRange = [new Date(0, 0, 0, 0, 0, 0), new Date(0, 0, 0, 23, 59, 59)];
const defaultExpand = ref(false);
const ruleFormRef = ref();
const ruleForm = reactive({
    distributor: '', //分销员关键字（ID、手机号、昵称）
    shopId: 0, //店铺ID
    orderSn: '', //订单编号
    type: 0, //佣金类型：1-推广 2-邀请
    status: 0, //状态：1-待结算 2-已结算 3-已失效
    date: [],
    createdAtStart: '', //创建时间（起）
    createdAtEnd: '' //创建时间（止）
});

/* 获取店铺列表 */
const shopList = reactive([]);
const onSelectShop = async () => {
    if (shopList.length) return;
    const { data } = await getShopListHook();
    let list = data.list || [];
    shopList.push(...list);
};
const onDateChange = v => {
    v || (ruleForm.date = []);
};
const onSearch = () => {
    let result = {};
    for (const [key, value] of Object.entries(ruleForm)) {
        result[key] = value;
    }
    if (result.date.length) {
        result.createdAtStart = result.date[0];
        result.createdAtEnd = result.date[1];
    }
    delete result.date;
    emit('search', result);
};
const onReset = () => {
    for (const [key, value] of Object.entries(ruleForm)) {
        ruleForm[key] = Array.isArray(value) ? [] : '';
        if (['type', 'status', 'shopId'].includes(key)) ruleForm[key] = 0;
    }
    ruleForm.createdAtStart = '';
    ruleForm.createdAtEnd = '';
    let result = {};
    Object.assign(result, ruleForm);
    delete result.date;
    emit('reset', result);
};
</script>
<style lang="scss" scoped>
.el-form {
    padding: 16px 24px 16px 18px;
    margin-bottom: 16px;
    display: flex;
    flex-wrap: wrap;
    .btn-space {
        margin-left: auto;
        .icon_btn {
            padding: 0;
            margin-left: 8px;
            .el-icon {
                margin-left: 5px;
            }
        }
    }
    .el-form-item {
        .el-form-item__label-wrap {
            .el-form-item__label {
                font-size: 14px;
                font-family: STHeitiSC-Light, STHeitiSC;
                font-weight: 300;
                color: #33302d;
            }
        }

        .el-form-item__content {
            .el-input,
            .el-select,
            .el-date-editor {
                width: 100%;
            }
        }
    }

    .el-button--text {
        border: 1px solid transparent;
    }

    &__cascader-panel {
        display: none;
    }
}
</style>
